<template>
  <div content="items">
    <div class="loading" v-if="loading">
      <div class="loader-inner square-spin">
        <div></div>
      </div>
    </div>
    <ul class="articles">
      <li class="item clearfix" v-for="(article, index) in articles">
        <router-link :to="{ name: 'article', params: { id: article.id }}">
          <div class="time fl">
            <div class="day">{{day(article.update_time)}}</div>
            <div class="ym">{{ym(article.update_time)}}</div>
          </div>
          <div class="cover fl"><img :src="article.cover"></div>
          <div class="item-main fl">
            <h2>{{article.name}}</h2>
            <p>{{article.name}}</p>
          </div>
        </router-link>
      </li>
    </ul>
    <div class="category-pager mt20">
      <pagination :curPage="1" :pageAll="pageAll" :perPage="4" @change-page="fetchData"></pagination>
    </div>
  </div>
</template>
<script>
  import pagination from  '@/components/news/pagination'
  import {sckr} from  '@/lib/sckr'
  import jsonp from 'jsonp'
  export default{
    data () {
      return {
        articles: {},
        perPage: 0, // 每页数量
        pageAll: 0,
        total: 0, // 总条数
        loading: false
      }
    },
    created () {
      this.fetchData(1)
    },
    methods: {
      day (time) {
        return time.slice(-2)
      },
      ym (time) {
        return time.substring(0, 7)
      },
      fetchData (page) {
        let that = this
        this.loading = true
        jsonp(sckr.api + 'article?page=' + page, null, function (err, result) {
          that.loading = false
          if (err) {
            console.error(result.msg);
          } else {
            that.articles = result.data
            that.perPage = result.per_page
            that.total = result.total
            that.pageAll = Math.ceil(that.total / that.perPage) // 计算总页数
          }
        })
      }
    },
    components: {
      pagination
    }
  }
</script>
<style scoped>
  .items{max-width: 1200px;}
  a{display: block}
  .articles li{ border: 1px solid #eee; padding: 20px; margin: 20px auto;  position: relative; width: 100%}
  .articles li:hover{border-color: #fff;   -webkit-box-shadow:0 0 10px #999;  -moz-box-shadow:0 0 10px #999;  box-shadow:0 0 10px #999;}
  .time{ width: 70px; height: 80px; background-color: #f8f8f8; padding: 10px;  text-align: center}
  .day{color: #999; font-size: 50px;}
  .ym{border-top: 1px solid #e8e8e8; color: #aaa; font-size: 14px; line-height: 30px; }
  img{ width: 150px; height: 100px; margin-left: 20px;  }
  .item-main{margin-left: 30px;}
  h2{font-weight: normal; font-size: 18px}
  p{color: #999; font-size: 12px; height: 50px;}
</style>
